<template>
  <div id="app">
    <topbar class="topbar"></topbar>
    <el-row class="content">
      <el-col :span="24">
        <articles></articles>
      </el-col>
      <!-- <el-col :span="6">
        <sidebar class="sidebar"></sidebar>
      </el-col> -->
    </el-row>
    <!-- <video id="video" src="../../assets/bgm.mp3" controls="controls" hidden="hidden" autoplay="autoplay"  loop="loop"> </video> -->
    <footbar></footbar>
  </div>
</template>

<script>
import topbar from '../public/topbar.vue'
import footbar from '../public/footbar.vue'
import articles from './articles.vue'
// import sidebar from './sidebar.vue'


export default {
  name: 'articleIndex',
  components: {
    topbar,
    articles,
    // sidebar,
    footbar
  },
  date () {
    return {
      // bgm: require('../../assets/bgm.mp3')
    }
  }
}
</script>

<style scoped>
#app {
  background-image: url(../../assets/bg9.jpg) ;
  background-size: 1920px 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 100%;
}

.content {
  width: 80%;
  margin: 0 auto;
  min-height: 1000px;
}

.topbar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;

}

.sidebar {
  margin-top: 90px;
}


@media screen and (max-width: 768px) {
  .content {
    width: 100%;
    margin: 0 auto;
  }
}
</style>
